<script setup lang="ts">
import { Overlay, Loading } from 'vant'
import { computed } from 'vue'

interface Props {
  show?: boolean
  text?: string
  color?: string
  size?: string | number
  vertical?: boolean
  textSize?: string
  textColor?: string
  zIndex?: number
}

const props = withDefaults(defineProps<Props>(), {
  show: false,
  text: '加载中...',
  color: '#ffffff',
  size: '30px',
  vertical: true,
  textSize: '14px',
  textColor: '#ffffff',
  zIndex: 100
})

const overlayStyle = computed(() => ({
  backgroundColor: '#000',
  zIndex: props.zIndex
}))

const loadingTextStyle = computed(() => ({
  fontSize: props.textSize,
  color: props.textColor,
  marginTop: props.vertical ? '12px' : '0',
  marginLeft: props.vertical ? '0' : '12px'
}))
</script>

<template>
  <Overlay :show="show" :style="overlayStyle" :lock-scroll="true" class="cover-loading">
    <div class="loading-content">
      <Loading :color="color" :size="size" :vertical="vertical" class="loading-spinner" />
      <div v-if="text" class="loading-text" :style="loadingTextStyle">
        {{ text }}
      </div>
    </div>
  </Overlay>
</template>

<style scoped>
.cover-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.loading-spinner {
  flex-shrink: 0;
}

.loading-text {
  white-space: nowrap;
  user-select: none;
}
</style>
